<template>
	<div class="login-container">
		<div class="left-logo"></div>
		<!-- 登录区域 -->
		<div class="login-form-box">
			<div class="login-title">
				<div class="login-logo"></div>
				<div>{{ loginTitle }}</div>
			</div>
			<div>
				<el-form ref="loginForm" :model="loginForm" size="medium" :rules="LoginRules" class="login-form">
					<!-- 账号密码登录 -->
					<div>
						<!--<el-form-item prop="tenantName">
							<el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder="公司">
								<div slot="prefix" class="el-icon-office-building input-icon" />
							</el-input>
						</el-form-item>-->
						<el-form-item prop="username">
							<el-input v-model="loginForm.username" size="large" type="text" auto-complete="off" placeholder="账号" @change="onUserNameChange">
								<div slot="prefix" class="el-icon-user input-icon" />
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input
								v-model="loginForm.password"
								type="password"
								size="large"
								auto-complete="off"
								placeholder="密码"
								@keyup.enter.native="getCode"
							>
								<div slot="prefix" class="el-icon-lock input-icon" />
							</el-input>
						</el-form-item>
					</div>
					<div class="flex-end-center margin-bottom-10">
						<el-dropdown trigger="click" @command="(e) => loginForm.invalidType = e">
							<el-button type="primary" plain size="mini" class="el-dropdown-link">
								登录时效: {{ invalidTypeList.find(x => x.id === loginForm.invalidType).name || '无' }}<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									v-for="item in invalidTypeList"
									:key="item.id"
									:command="item.id"
								>{{ item.name }}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					<!-- 下方的登录按钮 -->
					<el-form-item style="width:100%;">
						<el-button :loading="loading" size="large" type="primary" round style="width:100%;" @click.native.prevent="getCode">登 录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>

		<!-- footer -->
		<div class="footer">
			Copyright © 2022-{{ new Date().getFullYear() }} jeacon.cn All Rights Reserved.
		</div>
	</div>
</template>

<script>
    import { removePassword, setPassword } from '../../utils/jsencrypt';
    import {
        removeTenantName,
        setTenantId,
        setTenantName,
        removeRememberMe,
        removeUsername,
        setRememberMe,
        setUsername
    } from '../../utils/auth';
    import { getPlatformCustomerIdByName } from '../../api/system/platform-customer';

    export default {
        name: 'Login',
        components: {
        },
        data() {
            return {
                invalidTypeList: [
                    { id: 1, name: '正常过期' },
                    { id: 2, name: '15天过期' },
                    { id: 3, name: '一个月过期' },
                    { id: 4, name: '三个月过期' },
                    { id: 5, name: '一年过期' },
                    { id: 6, name: '永不过期' }
                ],
                loginTitle: process.env.VUE_APP_LOGIN_TITLE,
                codeUrl: '',
                mobileCodeTimer: 0,
                loginForm: {
                    tenantName: '',
                    username: '',
                    password: '',
                    captchaVerification: '',
                    mobile: '',
                    mobileCode: '',
                    invalidType: 1,
                    rememberMe: false
                },
                LoginRules: {
                    username: [{ required: true, trigger: 'change', message: '用户名不能为空' }],
                    password: [{ required: true, trigger: 'change', message: '密码不能为空' }]
                    /* tenantName: [
                        { required: true, trigger: 'blur', message: '公司名称不能为空' },
                        {
                            validator: (rule, value, callback) => {
                                getPlatformCustomerIdByName(value).then(res => {
                                    if (res.data.status === 200) {
                                        const tenantId = res.data.res;
                                        if (tenantId && tenantId >= 0) {
                                            // 设置公司名称
                                            setTenantId(tenantId);
                                            callback();
                                        } else {
                                            callback('公司名称不存在');
                                        }
                                    }
                                });
                            },
                            trigger: 'blur'
                        }
                    ]*/
                },
                loading: false,
                redirect: undefined
            };
        },
        mounted() {
            // 重定向地址
            this.redirect = this.$route.query.redirect;
        },
        methods: {
            onUserNameChange(e) {
                this.$set(this.loginForm, 'username', e);
            },
            getCode() {
                this.handleLogin({});
            },
            loginRequest(params) {
                // 登录
                this.loading = true;
                this.$store.dispatch('Login', params).then(() => {
                    this.loading = false;
                    this.$router.push({ path: this.redirect || '/' }).catch(() => {});
                }).catch(() => {
                    this.loading = false;
                });
            },
            handleLogin(captchaParams) {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        // 设置 Cookie
                        if (this.loginForm.rememberMe) {
                            setUsername(this.loginForm.username);
                            setPassword(this.loginForm.password);
                            setRememberMe(this.loginForm.rememberMe);
                            setTenantName(this.loginForm.tenantName);
                        } else {
                            removeUsername();
                            removePassword();
                            removeRememberMe();
                            removeTenantName();
                        }
                        this.loginForm.captchaVerification = captchaParams.captchaVerification;
                        this.loginRequest({
                            username: this.loginForm.username,
                            password: this.loginForm.password,
                            invalidType: this.loginForm.invalidType
                        });
                    }
                });
            }
        }
    };
</script>
<style lang="scss" scoped>
    @import "./login.scss";
</style>
